<template>
	<view >
		<view 
			class="head-bg " 
			:style="{
				'background': `url(${getImg('inviteIntegral-head')}) no-repeat center top`,
			}"
		>
			<head-nav
				bgColor="rgba(0,0,0,0)" 
				title="积分兑换"
			>
			</head-nav>
			<view class="head-info flex-a ju-bt mar-t48 padlr80 flex pos-rel">
				<view 
					class="record-btn flex-center pos-abs"
					@click="$goRouter('/pages/my/pages/integralRecord')"
				>
					<text class="mar-r4">积分记录</text>
					<u--image
						:showLoading="true" 
						:src="getImg('arrow-r-ff')"
						width="12rpx" 
						height="20rpx"
					></u--image>
				</view>
				<view class="head-l">
					<view class="head-tit">
						积分余额
					</view>
					<view class="head-val">
						312
					</view>
					<view class="head-overdue flex-a">
						<u--image
							:showLoading="true" 
							:src="getImg('tips-icon2')"
							width="28rpx" 
							height="28rpx"
							
						></u--image>
						<text class="mar-l6">预计12月过期922积分</text>
					</view>
				</view>
				<u--image
					:showLoading="true" 
					:src="getImg('Integral-img')"
					width="242rpx" 
					height="180rpx" 
				></u--image>
			</view>
			<view class="content-box padlr24 padtb34 mar-t48">
				<view class="block-tit flex-a ju-bt">
					<view class="">
						赚积分
					</view>
					<view 
						class="flex-a block-more" 
						@click="$goRouter('/pages/my/pages/integrationRule')"
					>
						<text class="mar-r6">更多</text>
						<u--image
							:showLoading="true" 
							:src="getImg('arrow-right')"
							width="16rpx" 
							height="24rpx" 
						></u--image>
					</view>
				</view>
				<view class="pay-box mar-t18 pad24 flex-a ju-bt">
					<view class="flex-a">
						<u--image
							:showLoading="true" 
							:src="getImg('wallet-icon')"
							width="48rpx" 
							height="48rpx" 
						></u--image>
						<view class="pad-l16">
							<view class="pay-tit">
								完成充值
							</view>
							<view class="pay-txt mar-t10">
								+1积分/10元
							</view>
						</view>
					</view>
					<view class="pay-btn flex-center">
						去完成
					</view>
				</view>
				<view class="block-tit flex-a ju-bt mar-t32">
					<view class="">
						积分商城
					</view>
					<view class="flex-a block-more" @click="$goRouter('/pages/my/pages/integralShop')">
						<text class="mar-r6">更多</text>
						<u--image
							:showLoading="true" 
							:src="getImg('arrow-right')"
							width="16rpx" 
							height="24rpx" 
						></u--image>
					</view>
				</view>
				<!-- 列表 -->
				<integralProductList></integralProductList>
			</view>
		</view>
		
	</view>
</template>

<script> // 积分兑换
	import integralProductList from "./components/integralProductList.vue"
	export default {
		components: {
			integralProductList
		},
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.content-box {
		
		.pay-box {
			height: 134rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FFA8A8;
			.pay-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
			}
			.pay-txt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.pay-btn {
				width: 136rpx;
				height: 58rpx;
				background: #FF7171;
				border-radius: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		.block-tit {
			.block-more {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}
	.head-info {
		.record-btn {
			right: 0;
			top: -20rpx;
			width: 134rpx;
			height: 40rpx;
			background: #FF7171;
			border-radius: 8rpx 0rpx 0rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		.head-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #111111;
		}
		.head-val {
			font-family: MiSans, MiSans;
			font-weight: 500;
			font-size: 80rpx;
			color: #000000;
		}
		.head-overdue {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.head-bg {
		min-height: 488rpx;
		background-size: 100% 488rpx !important;
	}
</style>
<style>
	page {
		background: #ffffff;
	}
</style>
